<template>
  <div class="goods_con">
    <!-- <el-form class="search" label-position="right" label-width="6rem" v-if="source === 2">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="分组：">
            <el-select v-model="params.groupId" filterable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb15">
          <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getList1" />
        </el-col>
      </el-row>
    </el-form> -->
    <vxe-table
      ref="listTree"
      border
      resizable
      highlight-hover-row
      :auto-resize="true"
      :data="articleList"
      width
      max-height="300"
      row-id="openId"
      highlight-current-row
      text-algin="center"
      :checkbox-config="{checkRowKeys: checkList, checkStrictly: false}"
      @checkbox-all="selectAll"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column type="checkbox" width="50" align="center" />
      <vxe-table-column field="title" min-width="250" align="left" title="文章标题" />
      <vxe-table-column field="authorName" width="120" align="left" title="作者" />
      <vxe-table-column field="groupName" width="150" align="left" title="分组" />
      <vxe-table-column field="readNum" width="120" align="right" title="阅读量" />
      <vxe-table-column field="likeNum" width="120" align="right" title="点赞量" />
      <vxe-table-column field="commentNum" width="120" align="right" title="评论量" />
    </vxe-table>
    <vxe-pager
      :current-page.sync="params.pageNum"
      :page-size.sync="params.pageSize"
      :total="brandTotal"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
      @page-change="getList"
    />
  </div>

</template>

<script>
import SearchButton from '@/components/SearchButton'
import {pageList,groupSelList} from '@/api/excellentArticle'

export default {
  components: {
    SearchButton
  },
  props: {
    source: {
      type: Number,
      default: 1
    },
    arrLists: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      options:[],
      params: {
        createTimeStart:'',
        createTimeEnd:'',
        groupId:'',
        publishStatus:1,
        pageNum:1,
        pageSize:20
      },
      brandTotal:0,
      articleList:[],
      checkList: [],
      arrList:[]
    }
  },
  mounted() {
    console.log(11111111,this.arrLists)
    this.checkList = this.arrLists
    // this.checkList = this.checkLists
    // this.arrList = this.arrLists
    this.getList()
    this.remoteMethod()
  },
  methods: {
    // 分组select
    remoteMethod(){
      groupSelList({name:''}).then(res =>{
        this.options = res
      })
    },
    refreshParams(params) {
      this.params = params
    },
    getList1() {
      this.params.pageNum = 1
      this.getList()
    },
    getList() {
      pageList(this.params).then(res => {
        this.checkList.forEach((item, index) => {
          res.records.forEach((it, idx) => {
            if (item.id === it.id) {
              this.$refs.listTree.setCheckboxRow(res.records[idx], true)
            }
          })
        })
        this.articleList = res.records
        this.brandTotal = res.total
      })
    },
    // 全部选中
    selectAll(e) {
      this.$emit('articleBox',e.records)
      // if (e.checked) {
      //   this.checkList.push(...e.records.map(item => item.id))
      //   this.checkList = Array.from(new Set(this.checkList))
      //   this.arrList.push(...e.records.map(item => {
      //     return {
      //       id: item.id,
      //       name: item.name,
      //       introduce: item.introduce
      //     }
      //   }))
      //   const arr2 = []
      //   this.checkList.forEach(item => {
      //     arr2.push(this.arrList.filter(it => it.id === item)[0])
      //   })
      //   this.arrList = arr2
      // } else {
      //   const arr = this.articleList.map(item => item.id)
      //   const arr1 = []
      //   this.checkList.forEach((item, index) => {
      //     arr.forEach(it => {
      //       if (item === it) {
      //         arr1.push(index)
      //       }
      //     })
      //   })
      //   arr1.reverse().forEach(item => {
      //     this.checkList.splice(item, 1)
      //     this.arrList.splice(item, 1)
      //   })
      // }
    },
    selectChangeEvent(row) {
       this.$emit('articleBox',row.records)
      // let i = -1
      // this.checkList.forEach((item, index) => {
      //   if (item === row.row.id) {
      //     i = index
      //   }
      // })
      // if (i === -1) {
      //   this.checkList.push(row.row.id)
      //   this.arrList.push({ id: row.row.id, name: row.row.name, introduce: row.row.introduce })
      //   const arr2 = []
      //   this.checkList.forEach(item => {
      //     if (this.arrList.filter(it => it.id === item).length > 0) arr2.push(this.arrList.filter(it => it.id === item)[0])
      //   })
      //   this.arrList = arr2
      // } else {
      //   this.checkList.splice(i, 1)
      //   this.arrList.splice(i, 1)
      // }
    },
    handleCurrentChange1(val) {
      this.currentRow1 = val
    },
  }
}
</script>

<style lang="css" scoped>
.dialog-footer{
  text-align: right;
}
</style>
